<template>
  <nut-checkbox-group
    ref="checkboxRef"
    v-model="text"
    :max="max"
    :disabled="disabled"
    :readonly="readonly"
    v-on="onEvents"
  >
    <nut-checkbox v-for="item in dic" :key="item.value" :label="item[valueKey]">
      {{ item[labelKey] }}
      <template v-for="slot in Object.keys($slots)" #[slot]="scope">
        <slot v-bind="scope" :name="slot" />
      </template>
    </nut-checkbox>
  </nut-checkbox-group>
</template>

<script setup>
import { commonProps, useCommonProps } from '@/supreme/core/props';
import { useEvents } from '@/supreme/core';
import { useVModel } from '@vueuse/core';
defineOptions({
  name: 'SuCheckbox'
});
const props = defineProps({
  ...commonProps,
  modelValue: {
    type: Array,
    default: () => {
      return [];
    }
  },
  iconSize: {
    type: String,
    default: '18'
  },
  max: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['update:modelValue', 'change', 'confirm', 'cancel']);
const text = useVModel(props, 'modelValue', emit);
const formSafe = inject('formSafe');
const checkboxRef = ref();
const { labelKey, valueKey } = useCommonProps(props);
const onEvents = computed(() => {
  const events = ['change'];
  return useEvents({ props, events, emit, form: formSafe?.form });
});
</script>

<style lang="scss" scoped></style>
